<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./js/jquery-latest.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        min-width: 500px;
    }

    #header,
    #footer {
        width: 100%;
        height: 100px;
        line-height: 100px;
        /*background-color: rgb(228, 222, 198);*/
    }

    #footer {
        clear: both;
    }

    #content {
        padding-left: 500px;
        padding-right: 500px;
        overflow: hidden;
    }

    .com {
        float: left;
        height: 500px;
        /* position: relative; */
    }

    #left {
        width: 200px;
        margin-left: -200px;
        background-color: rgb(161, 241, 241);
    }

    #main {
        width: 100%;
        /*background-color: rgb(243, 236, 236);*/
    }

    #right {
        width: 150px;
        margin-right: -150px;
        background-color: rgb(161, 241, 241);
    }
</style>

<body>
<div id="header"></div>
<div id="content">
    <!--<div id="left" class="com"></div>-->
    <div id="main" class="com">
        您好,<span id="userName"></span>
        <a href="/loginOut"><input type="button" onclick="loginOut()" value="注销"></a>
        <br>


        <div id="app">
            用户名：<input type="text" v-model="name"><br>
            <span v-text="name"></span><br>
            <span v-bind:title="mess">123</span><br>
            <li v-for="(item) in items">
                <span v-text="item.message"></span>
            </li>
            <button v-on:click="sayHi">click</button>
        </div>

        <div id="vm">
            <div>名字：{{info.name}}</div>
            <div>地址：{{info.address.country}}-->{{info.address.city}}-->{{info.address.street}}</div>
            <div>链接：<a target="_blank" v-bind:href="info.url">{{info.url}}</a> </div>
            <p>currentTime1：{{currentTime1()}}</p>
            <p>currentTime2：{{currentTime2}}</p>
        </div>

        <!--<div id="abc">-->
        <!--<input type="checkbox" v-model="agree">同意-->
        <!--</div>-->

    </div>
    <!--<div id="right" class="com"></div>-->
</div>
<!--<div id="footer"></div>-->
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            name: 'Hello !',
            mess: '12333',
            items: [
                {message: 'abc'},
                {message: 'def'},
                {message: 'hij'},
            ]
        },
        methods: {
            sayHi: function () {
                alert(this.mess)
            }
        }
    });

    var vm = new Vue({
        el: '#vm',
        data: {
            message: "hi",
            info: {
                name: null,
                address: {
                    country: null,
                    city: null,
                    street: null
                },
                url: null
            }
        },

        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },

        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        },

        mounted(){
            axios
                .get('data.json')
                .then(response=>(this.info = response.data))
        }


    });


    function loginOut() {
        return confirm('确定注销吗？');
    }

    function getCookie(name) {
        var cookies = document.cookie.split(";");
        var cname = name + "=";
        for (var i = 0; i < cookies.length; i++) {
            var cookieStr = cookies[i].replace(" ", "");
            if (cookieStr.indexOf(cname) !== -1) {
                return cookieStr.substring(cname.length, cookieStr.length);
            }
        }
        return "";
    }

    //自执行方法，一打开网页就执行
    // (function () {
    //     var token = getCookie("TOKEN");
    //     if (token == null || token === "" || token === undefined) {
    //         alert("请先登录");
    //         window.location.href = "/login.html";
    //         return;
    //     }
    //     $.ajax({
    //         url: "/getSession",
    //         type: "post",
    //         dataType: "json",
    //         data: {"token": token},
    //         success: function (data) {
    //             if (data.code == 200){
    //                 var userName = data.data;
    //                 $("#userName").text(userName);
    //             } else {
    //                 alert("请先登录");
    //                 window.location.href = "/login.html";
    //             }
    //         },
    //         error: function () {
    //             alert("服务器异常");
    //         }
    //     });
    // })();
</script>
</html>